<template>
	<view >
		<!-- 返回 -->
		<view class="backs">
			<view @click="backlast()">
				<image src="../../static/back1.png"></image>
			</view>
		</view>
		<view class="container">
			<loading
				ref="loading"
				:custom="false"
				:shadeClick="false"
				:type="2"
				@callback="callback()">
			</loading>
			<!-- 背景色区域 -->
			<view class="titleNview-background"  :style="'background: url('+url()+'/wximg/bjTop1.png'+'); background-size: 100%;'"  ></view>
			<!-- 搜索-->
			<view class="model">
				<view class="onlyOne">
					<view class="person">
						<image :src="url()+'/wximg/search.png'"></image>
					</view>
					<view class="modelrt">
						<view class="input-box">
							<view class="clear" @click="deleteInp(1)">
								<image :src="url()+'/wximg/delete1.png'"></image>
							 </view>
							 <input class="serchPs" v-model="userName" placeholder="请输入姓名" type="search">
						</view>
						<view class="input-box" style="border-bottom: none;"> 
							<view class="clear" @click="deleteInp(2)" >
								<image :src="url()+'/wximg/delete1.png'"></image>
							 </view>
							 <input class="serchPs"  v-model="carNum"   placeholder="请输入车牌号" type="text"/>  
						</view>
					</view>
				</view>
				<text class="modeline"></text>
				<view>
					<button class="pesBtn" hover-class='pesBtn-hover' @click="init"  type="primary" style="padding: 0 30upx;">搜索</button>
				</view>
			</view>
	       
			<view  v-if="contents2.length!=0"  class="wrapper" :style="{minHeight: heightContent+'px'}">
				<view class="tableBox">
					<view class="tabletitle">{{AuthorizationList}}</view>
					<view class="table">
						<view class="bgName">
							<!-- <text>{{shopName}}</text> -->
						</view>	
						<wyb-table 
						:key="key"
						show-vert-border="false" 
						header-bg-color="#fff" 
						first-col-bg-color="#fff" 
						content-bg-color="#fff"
						height='262px'
						content-ft-color="#333333"  
						header-weight="true" 
						border-color="#ffffff"
						ref="table" 
						:headers="headers2" 
						:contents="contents2" 
						width="100%"
						:show-vert-border="vertborder"
						:loading="loading"
						:url-col="urlCol"
						@onCheck="onCheck"
						@onCellClick="onCellClick"
						@onButtonClick="onButtonClick"
						  />			
					</view>
					        
				</view>    
			</view>
			<view   v-if="contents2.length==0"  class="wrapper" :style="{minHeight: heightContent+'px'}">
				<view  class="tableBox">
					<view class="tabletitle">暂无数据</view>
				</view>	
			</view>
		</view>
	</view>
</template>

<script>
	import wybTable from '@/components/wyb-table/wyb-table.vue'
	import service from '../../service.js';
	import loading from '@/components/xuan-loading/xuan-loading.vue'
	import {getDeliveryTaskQueList} from '@/api/request.js';
	import url from '@/api/url.js';
	let user=service.getUsers().user;
	export default {
		components: {
			wybTable,
			loading
		},
		data() {
			const theUrl = '/pages/demos/noticeBar-demo/more' // 本地的某个页面
			const httpUrl = 'https://ext.dcloud.net.cn/plugin?id=2667' // 某个网址
			return {
				url:url,
				customerClerk:{},//列表对象
				clerkName:'',
				clerkPhone:'',
				empoNumber:0,
				heightContent:'',
				swiperHeight: 0,
				//表格
				key: 0,
				headers2:[],
				contents2:[],
				loading:true,
				vertborder:false, //金融竖向条,但是不能去除头部
				AuthorizationList:'配送列表',
				userName:"",
				carNum:'',
				// 表格数据
				headers: [{
					label: '配送人',
					key: 'userName',
					width:265,
				}, {
					label: '商户数量',
					key: 'detailTotal',
					width:180,
				}, {
					label: '配送车辆',
					key: 'carNum',
					width:200,
					
				}, /* {
					label: '操作',
					key: 'operation',
					width:180,
				} */],
				contents: [
				],
				urlCol: [{
					type: 'pages/historyDelivered/detail',
					key: 'id'
				}, {
					type: 'http',
					key: 'url'
				},
				{
					type: 'button',
					key: 'operation'
				},
				],
			};
		},
		onReady(){
			let that = this
			uni.getSystemInfo({
				success: (res) => { // 需要使用箭头函数，swiper 高度才能设置成功
				// res - 各种参数
				 // 获取屏幕的高度
		　　    let info = uni.createSelectorQuery().select(".wrapper");// 获取某个元素
		　　　  info.boundingClientRect(function(data) { //data - 各种参数
					 let view  = res.windowHeight - data.top
					 that.heightContent = view
	　　        }).exec()
				}
			});		
		},
		onLoad() {
			user=service.getUsers().user;
		},
		onShow() {
			this.init();
		},
		methods: {
			// 返回上一层
			backlast(){
				uni.switchTab({
					url:'/pages/index/index'
					})
			},
			//表格
			onCellClick(e) {
				uni.navigateTo({
					url:'/pages/management/managementDetail?data='+encodeURIComponent(JSON.stringify(e)),
				})
			},
			onCheck(e) {
			/* 	console.log("多选框点击") */
			},
			
			wait(time) {
				return new Promise(resolve => {
					setTimeout(() => {
						resolve()
					}, time)
				})
			},
			init(){//初始化列表
				let  param={
				}; 
				
				if(this.carNum!=""){
					param.carNum=this.carNum
				}else if(this.userName!=""){
					param.userName=this.userName
				}
				let thsi=this;
				getDeliveryTaskQueList(param).then(res => {
				

					if (res.code == 200) {
						thsi.contents=[];
						thsi.empoNumber=res.map.data.length;
						thsi.contents=res.map.data
					if(	thsi.contents.length==0){
						uni.showToast({
							title: '暂无数据！',
							icon: 'none'
						});
						
					}
						this.headers2 = this.headers.slice()
						this.contents2 = this.contents.slice()
						this.loading = false
					} else{
						uni.showModal({
							title: '警告',
							content: 'code不符 请联系管理员',
							showCancel: false
						})
					}
				}).catch(err => {
					uni.showModal({
						title: '警告',
						content: '失败',
						showCancel: false
					})
				})
			},
			deleteInp(str){
				if(str==1){
					this.userName="";
					
				}else{
					this.carNum="";
				}
				
			},
				hideclose:function(){
					this.$refs.loading.close();
				},
				showopen:function(){
					this.$refs.loading.open();
				},
				callback(){
					console.log("加载关闭后回掉");
				},
		},

	}
</script>

<style scoped>	 
	.backs {
		position: absolute;
		z-index: 11111;
		top: 85upx;
		left: 30upx;
		display: flex;
		color: #000;
		line-height: 30upx;
		align-items: center;
		display: inline-block;
	}
	
	.backs image {
		width:45upx;
		height:45upx;
		margin-right: 14upx;
	}

	.titleNview-background {
		width: 100%;
		height: 418upx;
		-webkit-transition: .4s;
		transition: .4s;
		background-size: 100% 100%;
		position: relative;
	}

	.wrapper {
		position: relative;
		width: 91%;
		margin: 0 auto;
		z-index: 2;
		border-top-left-radius:27upx;
		border-top-right-radius:27upx;
		background-color: #fff;
	}

	/*搜索*/
	.text-box {
		position: absolute;
		color: #fff;
		bottom: 150upx;
		left: 5%;
		width: 91%;
		z-index: 2;
		display: flex;
		flex-direction: column;
	}
	.text-temp {
		line-height: 50upx;
         font-size: 32upx;
	}
	.pesBtn {
		border-radius: 200upx;
		background-color: #ffc562;
		font-size:28upx;
		color: #fff;
	}
	.pesBtn::after{
		border: none;
	}
	.model {
		width:81%;
		margin: 0 auto;
		margin-top: -129upx;
		padding: 35upx 5%;
		border-radius: 27upx;
		background-color: #fff;
		z-index: 2;
		box-shadow: 0 5px 5px rgba(227,227,227,.5);
		position: relative;
		display: flex;
		justify-content: space-between;
		align-items: center;		 
	}

	.onlyOne {
		width:70%;
		display: flex;
		align-items: center;
	}

	.modeline {
		width: 1px;
		height:70upx;
		background-color: #eeeeee;
	}

	.modelLf,.person  {
		width:40upx;
		height:40upx;
		border-radius: 50%;
		margin-right: 20upx;
		border: solid 1px #007457;
		position: relative;
	}

	.modelLf image {
		width: 70%;
		height: 70%;
		display: block;
		position: absolute;
		top: 50%;
		left: 50%;
		margin-top: -35%;
		margin-left: -35%;
	}
     .person image {
		width:90%;
		height:85%;
		display: block;
		position: absolute;
		bottom:0%;
		left: 50%;
		margin-left: -45%;
	}
	.modelrt {
		flex: 1;
		display: flex;
		flex-direction: column;
		color: #888888;
		white-space: nowrap;
		font-size: 28rpx;
		text-align:left; 
	}
.serchPs {
		padding-left: 2%;
		height: 35px;
		line-height: 35px;
		color:#333;
		width: 80%;
	}
	.input-box {
		display: flex;
		justify-content: space-between;
		align-items: center;
		position: relative;
		border-bottom: solid 1px #eee;
	}
	 .clear{
	   display: block;
	   position: absolute;
	   top: 10px;
	   right: 10px;
	   float: right;
		width: 10px;
		height: 10px;
	 }
	 .clear image{
		 width: 100%;
		 height: 100%;
	 }
	/* 表格 */
	.tableBox {
		width: 100%;
		padding-bottom: 40upx;
		margin-top: 44upx;
	}

	.tabletitle {
		border-top-left-radius: 27upx;
		border-top-right-radius: 27upx;
		background-color: #007457;
		height: 98upx;
		width: 100%;
		text-align: center;
		line-height: 98upx;
		color: #fff;
		font-size: 32upx;
	}

	.table {
		width: 96%;
		margin: 0 auto;
	}
	/*包裹ID及包裹编号*/
	.bgName {
		padding:20upx 0; 
		line-height: 40upx;
		display: flex; 
		justify-content: space-between;
		word-wrap: break-word;
		white-space: normal;
		word-break: break-all;
		border-bottom: solid 1px #eee;
	}
	
	</style>
